<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :pageShow="true"
  >
    <template #searchPanel>
      <search-panel @search="search" @insert="handleDataInsert" :showAddButton="false" :selectPer="'250'">
        <el-input v-model="form.name" style="width: 150px" clearable placeholder="车型名称"/>
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="false" :current="currentPage"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </data-table>
    </template >
  </base-layout>
</template>

<script>
  import { pageCarModel } from '@/api/after-sale/carModel'
  import baseMixin from '@/mixins/base'

  export default {
    mixins: [
      baseMixin({
        findData: pageCarModel,
        dataName: ['records', 'total'],
        idName: 'id',
        format(res) {
          return res.map(data => {
            return data
          })
        }
      })
    ],
    props: {
      value: { type: String }
    },
    data() {
      return {
        tableColumnAttributes: [
          { name: '首字母', value: 'initial', type: 'text' },
          { name: '车型名称', value: 'modelName', type: 'text' },
          { name: '品牌', value: 'brandName', type: 'text' },
          { name: '年代款', value: 'timeType', type: 'text' },
          { name: '厂商指导价', value: 'manufacturerPrice', type: 'text' },
          { name: '排量(L)', value: 'displacementL', type: 'text' }
        ],
        form: {
          name: this.value
        }
      }
    },
    created() {
      this.search()
    },
    methods: {
      search() {
        this.notQuery = false
        this.searchOptions = this.form
        this.currentPage = 1
        this.setTableData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  aside {
    background: #eef1f6;
    padding: 8px 24px;
    margin-bottom: 20px;
    border-radius: 2px;
    display: block;
    line-height: 32px;
    font-size: 16px;
    clear: left;
    color: #2c3e50;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  aside span{ margin-right: 20px}
</style>
